<template>
  <div class="zh-video-review">
    <nav-header>
      <div class="zh-h5-nav">
        <div class="active">平台录制文件列表</div>
        <div @click="changePanel">设备录制文件列表</div>
        <!-- <div @click="changePanel('stream')">流媒体录制文件列表</div> -->
      </div>
    </nav-header>

    <div class="zh-table">
      <div class="zh-table-open clear">
        <div class="zh-open-left fl">
          <div class="open-width">
            <el-input v-model="keyword" placeholder="请输入视频名搜索" @keyup.enter.native="searchFunc"></el-input>
          </div>
          <el-button type="primary" @click="searchFunc">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
        <div class="zh-open-right fr">
          <el-button type="danger" @click="deleteMuiltVideo_confirm">批量删除</el-button>
        </div>
      </div>

      <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
        <el-table :data="listData" @selection-change="tableSelectionChange" border max-height="600" style="width: 100%">
          <el-table-column type="selection" width="50" align="center" fixed>
          </el-table-column>
          <el-table-column prop="name" label="视频名" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="_type" label="传输方式" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="" label="主讲人" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-select v-model="scope.row.approveData.teacher_id" filterable placeholder="请选择主讲人">
                <el-option v-for="item in teacherData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="" label="视频分类" align="center" width="220">
            <template slot-scope="scope">
              <el-cascader placeholder="请选择组织架构" :options="orgData" separator="->" :props="orgDataProps"
                v-model="scope.row.orgGroup">
              </el-cascader>
            </template>
          </el-table-column>
          <el-table-column prop="" label="视频信息" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-select v-model="scope.row.approveData.is_nice" filterable placeholder="请选择">
                <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="upload_time" label="上传时间" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="type" label="类型" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="size" label="大小" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" align="center" width="130">
            <template slot-scope="scope">
              <el-button @click="videoView(scope.row.play_url, scope.row.id)" type="text">预览</el-button>
              <el-button @click="approveVideo_confirm(scope.row)" type="text">批准</el-button>
              <el-button @click="deleteVideo_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="table-pagination" v-show="total_number > 10">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total_number">
          </el-pagination>
        </div>
      </div>
    </div>

    <transition name="el-fade-in-linear">
      <div class="masking" :class="{ activeLive: isActive }">
        <div class="maskingBox">
          <div class="masking_h">
            <span>视频预览</span>
            <i class="el-icon-close" @click="viewClose"></i>
          </div>
          <div class="masking_c">
            <!-- <videoAlertView v-if="showVideoPlayer" :playParam.sync="playParam"></videoAlertView> -->
            <!-- <video v-if="showVideoPlayer" class="review-video" style="width:100%; height:100%; object-fit:fill;" controls autoplay preload="auto" >
                            <source :src="playParam.play_url" />
                            您的浏览器不支持 HTML5 video 标签,建议下载最新版谷歌浏览器使用。
                        </video> -->
            <nativeVideo v-if="showVideoPlayer" :playParam.sync="playParam">
            </nativeVideo>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// import videoAlertView from "../../public/videoAlertView";
import nativeVideo from '../../public/nativeVideo';

export default {
  data() {
    return {
      rowLen: 0,
      loading: {
        status: false,
        txt: "获取数据..."
      },
      orgData: [],
      orgParam: {
        data_type: "manage_tree",
        status: [1, 2],
        level_string: "<4"
      },
      orgDataProps: {
        value: "id",
        label: "name"
      },
      listData: [],
      listParam: {
        keyword: "",
        page_index: 1,
        page_size: 10
      },
      keyword: "",
      selected: [],
      total_number: 0,
      teacherData: [],
      addForm: {},
      AddFormOrgGroup: [],
      teacherParam: {
        org_id: 0,
        role_id: 6,
        status: [1]
      },
      typeOption: [
        {
          value: 0,
          label: "公开课"
        }
        // {
        //   value: 1,
        //   label: '微课'
        // }
      ],
      isActive: true,
      showVideoPlayer: false,
      playParam: { play_url: "" },

    };
  },
  created() {
    this.getList();
    this.getOrgData();
    this.getTeacher();
  },
  mounted() { },
  methods: {
    searchFunc() {
      this.listParam.keyword = this.keyword;
      this.listParam.page_index = 1;
      this.getList();
    },
    reset() {
      this.keyword = "";
      this.listParam = {
        keyword: "",
        page_index: 1,
        page_size: 10
      };
      this.getList();
    },
    viewClose() {
      this.showVideoPlayer = false;
      this.isActive = true;
    },
    videoView(url) {
      this.playParam.play_url = url;
      this.showVideoPlayer = true;
      this.isActive = false;
    },
    approveVideo_confirm(obj) {
      if (
        parseInt(obj.approveData.teacher_id) === 0 ||
        is_empty(obj.approveData.teacher_id)
      ) {
        this.$message.warning("请选择主讲人");
        return false;
      }
      if (obj.orgGroup.length < 3) {
        this.$message.warning("请选择正确的组织架构");
        return false;
      }
      if (
        parseInt(obj.approveData.is_nice) !== 0 &&
        parseInt(obj.approveData.is_nice) !== 1
      ) {
        this.$message.warning("请选择视频信息");
        return false;
      }
      let yes = data => {
        obj.approveData.study_section_id = obj.orgGroup[1];
        obj.approveData.grade_id = is_empty(obj.orgGroup[2])
          ? 0
          : obj.orgGroup[2];
        this.approveVideo(obj.approveData);
      };
      let cancel = data => { };
      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "确定批准通过 " + obj.name + " 吗？"
      });
    },
    approveVideo(param) {
      let success = data => {
        this.$message.success(data.msg);
        this.getList();
      };
      this.$ajax.post("api/video/review_upload", param, {
        func: { success: success }
      });
    },
    getTeacher() {
      let success = data => {
        this.teacherData = data.data;
      };
      this.$ajax.get("api/user/user", {
        params: this.teacherParam,
        func: { success: success }
      });
    },
    getOrgData() {
      let success = res => {
        !is_empty(res.data) &&
          res.data.forEach(item1 => {
            let data1 = item1.children;

            !is_empty(data1) &&
              data1.forEach(item2 => {
                let data2 = item2.children;

                !is_empty(data2) &&
                  data2.forEach(item3 => {
                    item3.children = null;
                  });
              });
          });

        this.orgData = res.data;
      };

      if (this.$store.state.checkLevel) {
        this.orgParam.direction = 'down'
        this.orgParam.data_type = 'manage_tree'
        this.orgParam.pid = 1
        this.$ajax.get("api/newlevel/platform_org", {
          params: this.orgParam,
          func: { success: success },
        });
      } else {
        this.$ajax.get("api/org/org", {
          params: this.orgParam,
          func: { success: success },
        });
      }
    },
    getType(val) {
      return this.cutType[parseInt(val)];
    },
    getMirco(val) {
      return this.isMirco[parseInt(val)];
    },
    getList() {
      this.loading.status = true;
      let success = data => {
        this.loading.status = false;
        console.log(data.data, '0000000000')

        this.listData = data.data.data;
        // for (var i = this.listData.length - 1; i >= 0; i--) {
        //     this.listData[i].orgGroup = [];
        // }

        for (var i = this.listData.length - 1; i >= 0; i--) {
          let _temp = this.listData[i].approveData;
          this.listData[i].orgGroup = [1];

          _temp.study_section_id && this.listData[i].orgGroup.push(_temp.study_section_id);
          _temp.grade_id && this.listData[i].orgGroup.push(_temp.grade_id);

          if (_temp.teacher_id == 0) {
            _temp.teacher_id = null;
          }
        }


        this.total_number = data.data.data_sum;
      };
      let fail = data => {
        this.loading.status = false;
        this.$message.error(data.msg);
      };
      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get("api/video/review_upload", {
        params: this.listParam,
        func: { success: success, fail: fail }
      });
    },
    //选中
    tableSelectionChange(val) {
      this.selected = val;
    },
    handleSizeChange(val) {
      this.listParam.page_index = 1;
      this.listParam.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listParam.page_index = val;
      this.getList();
    },
    deleteVideo(id) {
      let success = data => {
        this.$message.success(data.msg);

        if (this.listData.length - this.rowLen === 0) {
          if (this.listParam.page_index > 1) {
            this.listParam.page_index--;
          } else {
            this.listParam.page_index = 1;
          }
        }

        this.getList();
      };
      this.$ajax.delete("api/video/review_upload", {
        params: { id: id },
        func: { success: success }
      });
    },
    deleteVideo_confirm(obj) {
      let yes = data => {
        this.rowLen = 1;
        this.deleteVideo(obj.id);
      };
      let cancel = data => { };
      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "确定将 " + obj.name + " 删除吗？"
      });
    },
    deleteMuiltVideo_confirm() {
      if (this.selected.length === 0) {
        this.$message.warning("请选择要删除的项");
        return false;
      }
      let yes = data => {
        this.rowLen = this.selected.length;
        this.muilDeleteVideo();
      };
      let cancel = data => { };

      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "确定要删除选中的项吗？"
      });
    },
    muilDeleteVideo() {
      var ids = [];
      for (var i = this.selected.length - 1; i >= 0; i--) {
        ids.push(this.selected[i].id);
      }
      this.deleteVideo(ids);
    },
    changePanel(panel) {
      // if (panel === 'stream') {
      //     this.$router.push("/resources/video/video-review-stream")
      // } else {
      this.$router.push("/resources/video/video-review-multi")
      // }
    }
  },
  components: {
    // videoAlertView
    nativeVideo
  }
}
</script>

<style lang="scss">
.zh-video-review {
  .el-input--small .el-input__inner {
    height: auto !important;
  }

  .el-table__body-wrapper table tbody {
    // td:nth-child(4),
    // td:nth-child(5),
    // td:nth-child(6),
    // td:nth-child(9) {
    //     padding: 0;
    // }
  }

  .masking {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    background: rgba(0, 0, 0, 0.3);
    z-index: 4;

    .maskingBox {
      position: absolute;
      top: 20%;
      left: 50%;
      width: 800px;
      margin-left: -400px;
      background: #fff;
    }

    .masking_h {
      padding: 10px 15px;
      background: #348efc;
      text-align: center;
      text-align-last: justify;

      span {
        font-size: 16px;
        display: inline-block;
        vertical-align: middle;
        color: #fff;
      }

      i {
        font-size: 16px;
        display: inline-block;
        vertical-align: middle;
        color: #fff;
        cursor: pointer;
      }
    }

    .masking_c {
      padding: 30px;
    }
  }

  .activeLive {
    opacity: 0;
    visibility: hidden;
  }
}
</style>
